<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Draw a polygon and calculate its area</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <style>

    </style>

    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.js"></script>
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css"
        type="text/css">
    <div id="map"></div>


    <script>


        /**
         * 将GeoJSON对象转换为WKT格式的字符串
         * @param {Object} geojson - GeoJSON对象
         * @returns {string} WKT格式的字符串
         */
        function geojsonToWKT(geojson) {
            switch (geojson.type) {
                case "Point":
                    return "POINT(" + geojson.coordinates.join(" ") + ")";
                case "LineString":
                    return "LINESTRING(" + geojson.coordinates.map(coord => coord.join(" ")).join(",") + ")";
                case "Polygon":
                    return "POLYGON((" + geojson.coordinates[0].map(coord => coord.join(" ")).join(",") + "))";
                case "MultiPoint":
                    return "MULTIPOINT(" + geojson.coordinates.map(coord => "(" + coord.join(" ") + ")").join(",") + ")";
                case "MultiLineString":
                    return "MULTILINESTRING(" + geojson.coordinates.map(coords => "(" + coords.map(coord => coord.join(" ")).join(",") + ")").join(",") + ")";
                case "MultiPolygon":
                    return "MULTIPOLYGON(" + geojson.coordinates.map(polygonCoords => "((" + polygonCoords.map(coord => coord.join(" ")).join(",") + "))").join(",") + ")";
                default:
                    throw new Error("Invalid GeoJSON type: " + geojson.type);
            }
        }

        mapboxgl.accessToken = 'pk.eyJ1Ijoibm9ydGh2aSIsImEiOiJjbGVydjV6YWkwMGFhNDFudG14ZXU3MXM3In0.o6cCmMVC4u7jsSQeN9BNiQ';
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/satellite-v9', // style URL
            center: [-91.874, 42.76], // starting position [lng, lat]
            zoom: 12 // starting zoom
        });

        const draw = new MapboxDraw({
            displayControlsDefault: false,
            // Select which mapbox-gl-draw control buttons to add to the map.
            controls: {
                polygon: true,
                trash: true
            },
            // Set mapbox-gl-draw to draw by default.
            // The user does not have to click the polygon control button first.
            defaultMode: 'draw_polygon'
        });
        map.addControl(draw);


        map.on('draw.create', updateArea);
        map.on('draw.delete', updateArea);
        map.on('draw.update', updateArea);

        function updateArea(e) {
            const data = draw.getAll();
            if (data.features.length > 0) {
                console.log(data.features[0].geometry);
                console.log(geojsonToWKT(data.features[0].geometry))
            }
        }
    </script>

</body>

</html>